<template>
  <div>
    <h1>【aty-card】 component demo</h1>
    <p>【aty-card】 本质</p>
    <aty-row class="fd-card-box" style="padding:20px">
      <aty-row>
        <aty-title level="4">1.【aty-card】 基础无标题</aty-title>
        <aty-card style="width: 150px;text-align: center">
          <aty-image src="/static/images/avatar.jpg" />
          <aty-text text="I am Chinese" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-card】 带头部</aty-title>
        <aty-card style="width: 200px;">
          <span slot="header">Header</span>
          <aty-text text="Content" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-card】 复杂用例</aty-title>
        <aty-card style="width: 200px;">
          <div slot="header">
            Header
            <aty-icon class="aty-fr aty-curp" type="ios-loop-strong" @click="clickRefresh" />
          </div>
          <aty-text text="实例标题" slot="title" />
          <aty-panel text="这是内容这是内容" />
          <aty-panel text="这是内容这是内容" />
          <aty-panel text="这是内容这是内容" />
          <aty-panel text="这是内容这是内容" />
          <aty-panel text="这是内容这是内容" />
          <aty-panel text="这是内容这是内容" />
          <aty-panel text="这是内容这是内容" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-card】 无边框</aty-title>
        <aty-card style="width: 200px;" :bordered="false">
          <aty-text text="这是内容这是内容这是内容这是内容这是内容这是内容" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-card】 划过阴影效果</aty-title>
        <aty-card style="width: 200px;" shadow="hover">
          <aty-text text="这是内容这是内容这是内容这是内容这是内容这是内容" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">6.【aty-card】 默认带阴影</aty-title>
        <aty-card style="width: 200px;" shadow="always">
          <aty-text text="实例标题" />
          <aty-text text="这是内容这是内容这是内容这是内容这是内容这是内容" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">7.【aty-card】 没有阴影</aty-title>
        <aty-card style="width: 200px;" shadow="never">
          <aty-text text="实例标题" />
          <aty-text text="这是内容这是内容这是内容这是内容这是内容这是内容" />
        </aty-card>
      </aty-row>
      <aty-row>
        <aty-title level="4">8.【aty-card】 实际示例</aty-title>
        <aty-card class="card" width="260px" v-for="n in 3" :key="n">
          <img
            src="https://img.zcool.cn/community/011ae25df1ddf1a8012097b305151e.jpg@260w_195h_1c_1e_1o_100sh.jpg"
            alt
            slot="header"
          />
          <p class="title">一把把把把住了</p>
          <p class="type">插画&nbsp;有趣插画</p>
          <p class="item">
            <aty-icon type="ios-eye-outline">&nbsp;20</aty-icon>
            <aty-icon type="ios-heart">&nbsp;20</aty-icon>
            <aty-icon type="android-share-alt">&nbsp;20</aty-icon>
          </p>
        </aty-card>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: "这是标题"
    };
  },
  methods: {
    clickRefresh() {
      alert("refresh");
      this.text =
        this.text + this.text + this.text + this.text + this.text + this.text;
    }
  },
  mounted() {}
  //  components: { Alert, Icon }
};
</script>

<style lang="less" type="text/less">
.fd-card-box {
  margin: 20px;
  text-align: left;
}
.card {
  position: relative;
  bottom: 0;
  transition: .2s ease-in-out;
  margin-left: 50px;
  display: inline-block;
  cursor: pointer;
  &:hover {
    bottom: 6px;
  }
  .aty-card-head {
    padding: 0;
  }
  .aty-card-body {
    padding: 11px 16px 13px;
    height: 75px;
    .title {
      height: 20px;
      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .type {
      font-size: 12px;
      color: #bbb;
      margin-bottom: 17px;
      height: 18px;
    }
    .item {
      font-size: 14px;
      color: #bbb;
      bottom: 14px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
